<template>
  <span>
    <svg
      t="1734860240959"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="15350"
      :style="styleCpd"
    >
      <path
        d="M655.706179 465.602819L332.053897 218.588294c-38.414608-29.327534-93.791393-1.929039-93.791392 46.396277v494.029051c0 48.325316 55.376785 75.725617 93.791392 46.398084l323.652282-247.014525c30.602722-23.357989 30.602722-69.436372 0-92.794362zM781.064814 780.798397V451.684117v-164.562559c0-19.628152 5.904521-60.475733-17.057907-75.841215-25.523642-17.068744-59.747828 1.210165-59.747828 31.919454v493.676839c0 19.628152-5.915358 60.473927 17.047069 75.841215 25.532673 17.068744 59.758666-1.211971 59.758666-31.919454z"
        p-id="15351"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
